<!-- 收入合同 -->
<template>
    <div :style="{
        height: '100vh',
        overflow: 'hidden',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',

        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6" > <a-form-item label="合同编码" name="contractCode">
                            <a-input v-model:value="queryForm.contractCode" />
                        </a-form-item>
                    </a-col> <a-col :span="6" > <a-form-item label="合同名称" name="contractName">
                            <a-input v-model:value="queryForm.contractName" />
                        </a-form-item>
                    </a-col> <a-col :span="6" > <a-form-item label="项目名称" name="projectName">
                            <a-input v-model:value="queryForm.projectName" />
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="合同类型" name="contractType"
                            :options="contractType">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.contractType" placeholder="请选择">
                            </a-select>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="业主名称" name="ownerName">
                            <a-input v-model:value="queryForm.ownerName" />
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="负责人" name="responsiblePerson">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.responsiblePerson" placeholder="请选择负责人">
                                <!-- 这里应该是从后端获取负责人列表，并填充到下拉框中 -->
                            </a-select>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="所属部门" name="affiliatedOrganization">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.affiliatedOrganization" placeholder="请选择机构">
                                <!-- 这里应该是从后端获取机构列表，并填充到下拉框中 -->
                            </a-select>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="合同金额">
                            <a-row>
                                <a-col :span="12">
                                    <a-input-number name="contractAmountStart" v-model:value="queryForm.contractAmountStart"
                                        min="0" style="width: 100%;" placeholder="起始金额" />
                                </a-col>
                                <a-col :span="12">
                                    <a-input-number name="contractAmountEnd" v-model:value="queryForm.contractAmountEnd"
                                        min="0" style="width: 100%;" placeholder="结束金额" />
                                </a-col>
                            </a-row>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="未付金额">
                            <a-row> <a-col :span="12">
                                    <a-input-number name="unpaidAmountStart" v-model:value="queryForm.unpaidAmountStart"
                                        min="0" style="width: 100%;" placeholder="起始金额" /></a-col> <a-col :span="12">
                                    <a-input-number name="unpaidAmountEnd" v-model:value="queryForm.unpaidAmountEnd" min="0"
                                        style="width: 100%;" placeholder="结束金额" /></a-col>
                            </a-row>
                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="签订日期" name="signingDate">
                            <a-row>

                                <a-range-picker v-model:value="queryForm.signingDate" style="width:100%" />
                            </a-row>

                        </a-form-item>
                    </a-col> <a-col :span="6" v-show="advanced">
                        <a-form-item label="审核状态" name="auditStatus">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.auditStatus" placeholder="请选择" :options="auditStatusOptions">
                            </a-select>
                        </a-form-item> </a-col>
                        <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                </a-row>
            </a-form>
        </a-card> <a-card :bordered="false">

            <s-table ref="tableRef" tableLayout="fixed" :data="loadData" bordered :row-key="(record) => record.id"
                :tool-config="toolConfig" :columns="columns" :scroll="{ x: 1000, }"  class="mb-2">
          
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="queryForm.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                        <!-- <a-space>
                            <a-button type="primary" @click="showEdit()">
                                <template #icon>
                                    <plus-outlined />
                                </template>
                                <span>新增</span>
                            </a-button>
                        </a-space> -->
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    <template v-if="column.key === 'type'">

                        {{ invoiceType.find(x => x.value === record.type)?.label }}
                    </template>


                    <template v-if="column.key === 'control'">
                        <div>
                            <a @click="showInfo(record)">查看</a>
                        
                        </div>
                    </template>
                </template>
            </s-table>
        </a-card>
    

        <info ref="infoRef"></info>
    </div>
</template>

<script setup name="receivableMeetSale">
import { roles, auditStatusOptions, contractType, invoiceType } from '@/utils/constants.js'
import api from '@/api/finance/invoic/index'
import info from './components/invoic/info.vue'
// import edit from './components/invoic/edit.vue'
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 50,
        align: 'center'
    },
    {
        title: '发票编号',
        dataIndex: 'code',
        key: 'code',
        width: 120,
        align: 'center'
    },
    {
        title: '项目名称',
        dataIndex: 'proName',
        key: 'proName',
        width: 180,
        align: 'center'
    },
    {
        title: '甲方名称',
        dataIndex: 'proCustom',
        key: 'proCustom',
        width: 120,
        align: 'center'
    },
    {
        title: '开票日期',
        dataIndex: 'invoiceTime',
        key: 'invoiceTime',
        width: 150,
        align: 'center'
    },
    {
        title: "发票类型",
        dataIndex: "type",
        key: "type",
        width: 120,
        align: 'center'
    },
    {
        title: '开票金额',
        dataIndex: 'amount',
        key: 'amount',
        width: 120,
        align: 'center'
    },
    {
        title: "申请人",
        dataIndex: "createUserName",
        key: "createUserName",
        width: 120,
        align: 'center'
    },
    {
        title: "所属部门",
        dataIndex: "orgName",
        key: "orgName",
        width: 120,
        align: 'center'
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: 'center',
        fixed:"right"
    },
];


const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const editRef = ref()
const isEdit = ref(false)
const showFliter = ref(false)
const showAdd = ref(false)
const queryForm = ref({})
const infoRef = ref()
const showInfo = (record) => {
    infoRef.value.show(record)
}


const remove = (record) => {
    console.log("remove id", record)
    api.delete([{ id: record.id }]).then((res) => {
        tableRef.value.refresh(true)
    })
}

const onQuery = () => {
    tableRef.value.refresh(true)
}
const submit = () => {
    editRef.value.submit()
}
const onClose = (refresh) => {
    showAdd.value = false
    if (refresh) {
        tableRef.value.refresh(true)
    }
}

const loadData = (parameter) => {
    queryForm.value.current = parameter.current
    queryForm.value.size = parameter.size
    return api.page(queryForm.value).then((res) => {
        return res
    })

}
const reset = () => {
    queryForm.value = {}
}
const showEdit = (record) => {
    editRef.value.show(record)
    showAdd.value = true
    if (record) {
        isEdit.value = true
    } else {
        isEdit.value = false
    }
}

</script>
<style scoped></style>
./components/invoic/edit2.vue